---
export interface Props {
	variant?: 'neutral' | 'accent';
}
const { variant = 'neutral' } = Astro.props as Props;
---

<span class={`badge ${variant}`}><slot /></span>

<style>
	.badge {
		display: inline-block;
		font-size: var(--sl-text-xs);
		font-family: var(--__sl-font-mono);
		border: 1px solid;
		border-radius: 0.25rem;
		line-height: 1;
		padding: 0.375em 0.5em;
		white-space: nowrap;
		color: var(--sl-color-white);
	}

	.neutral {
		border-color: var(--sl-color-gray-5);
		background-color: var(--sl-color-gray-6);
	}

	.accent {
		border-color: var(--sl-color-accent);
		background-color: var(--sl-color-accent-low);
	}
</style>
